<template>
  <view class="lawyer-list">
    <navigator :url="`/pages/subpackages/detail/lawyer?id=${item.id}`" open-type="navigate" hover-class="none" class="item u-p-20" v-for="(item, index) in lawyerList" :key="index">
      <view class="top u-flex">
        <view class="left u-flex-col u-col-center">
          <u-image :src="item.avatar" mode="aspectFill" width="130" height="130" shape="circle"></u-image>
          <view class="year u-font-26">从业{{item.year || ""}}年</view>
          <view @click.stop="followFriend(index, item.id, item.is_hy, item.is_hys)" v-if="btnShow" class="attend u-m-t-30">
            <u-tag v-if="item.is_hy == 3 && item.is_hys == 1" text="互相关注" bg-color="#389bf2" color="#fff" border-color="#389bf2" />
            <u-tag v-if="item.is_hy == 1 && item.is_hys == 1" text="已关注" bg-color="#389bf2" color="#fff" border-color="#389bf2" />
            <u-tag v-if="item.is_hy == 0 && item.is_hys == 4" text="+ 关注" bg-color="#fff" color="#389bf2" border-color="#fff" />
            <u-tag v-if="item.is_hy == 2 && item.is_hys == 1" text="关注" bg-color="#fff" color="#389bf2" border-color="#fff" />
          </view>
          <view v-if="!btnShow" class="evaluate u-m-t-30">
            <view v-if="item.select" @click.stop="deselect(index, item.id)" class="tag">
              <u-tag text="已选" bg-color="#389bf2" color="#fff" border-color="#fff" />
            </view>
            <view v-else @click.stop="childChoice(item, index)" class="tag">
              <u-tag text="选择" bg-color="#fff" color="#666" border-color="#389bf2" />
            </view>
          </view>
        </view>
        <view class="info u-flex-1 u-m-l-20">
          <view class="title u-flex u-row-between">
            <view class="name">{{item.nickname || ""}}<text class="subname u-m-l-20 u-font-24">{{item.is_lvs || ""}}</text></view>
            <view class="money u-font-26">￥ <text class="u-font-36">{{item.online_service || ""}}</text></view>
          </view>
          <view class="address u-m-t-10 u-font-26 u-flex u-row-between">
            <view class="city u-flex-1">{{item.city || ""}}</view>
            <view class="position u-m-t-30 u-font-24">距你{{item.km || "0"}}km</view>
          </view>
          <view v-if="item.major || item.industry" class="tag u-m-t-20 u-flex">
            <view v-if="item.major" class="u-flex">
              <u-tag v-for="(its, ind) in item.major.split('，')" :key="ind" :text="its" bg-color="#89a2fc" color="#fff" border-color="#fff" />
            </view>
            <view v-if="item.industry" class="u-flex">
              <u-tag v-for="(its) in item.industry.split('，')" :key="its" :text="its" bg-color="#f9a02d" color="#fff" border-color="#fff" />
            </view>
          </view>
          <view class="u-flex u-m-t-20 u-row-between u-col-bottom">
            <view class="">
              <view class="rate u-font-24">
                专业度：
                <u-rate :value="item.start" :count="count" disabled active-color="#f9a02d" gutter="2"></u-rate>
              </view>
              <view class="u-font-24 u-m-t-20 u-flex">
                <view class="service">服务次数 <text class="number">{{item.f_num || "0"}}</text></view>
                <view class="review u-m-l-20"><text class="text">评</text> <text class="number">{{item.p_num || "0"}}</text></view>
              </view>
            </view>
            <view @click.stop="employLawyer(item)" class="employ">
              <u-tag text="立即聘请" shape="circle" bg-color="#389bf2" color="#fff" border-color="#fff" />
            </view>
          </view>
        </view>
      </view>
    </navigator>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "lawyer-list",
  data() {
    return {
      count: 5,
      value: 4,
      checkedArray: [],
    };
  },
  props: {
    // 律师
    lawyerList: {
      type: Array,
      default: () => [],
    },
    // 按钮
    btnShow: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    ...mapState(["vuex_user_id", "vuex_openid"]),
  },
  methods: {
    // 关注好友
    followFriend(index, id, status, mutual) {
      if (this.vuex_user_id == id) return this.$u.toast("不能关注自己~");
      this.$emit("followFriend", { index, id, status, mutual });
    },
    // 选择
    childChoice(item, index) {
      if (this.checkedArray.length >= 2) {
        return this.$u.toast(`最多可选择两名律师~`);
      }
      this.$set(this.lawyerList[index], "select", true);
      this.checkedArray.push(item);
      this.$emit("getChecked", this.checkedArray);
    },
    // 取消选择
    deselect(index, id) {
      this.lawyerList[index].select = false;
      this.checkedArray.splice(
        this.checkedArray.findIndex((item) => item == id),
        1
      );
      this.$emit("getChecked", this.checkedArray);
    },
    // 聘请律师
    employLawyer(e) {
      uni.navigateTo({
        url: `/pages/subpackages/product/index/index?id=${e.id}`,
      });
      // this.$emit("employLawyer", e);
    },
  },
};
</script>

<style lang="scss" scoped>
.lawyer-list {
  .item {
    border-radius: 10rpx;
    box-shadow: 0 0 5px $uni-border-color;

    &:nth-child(n + 2) {
      margin: 30rpx 0 0;
    }
  }

  .year {
    z-index: 1;
    margin: -10rpx 0 0;
    padding: 4rpx 10rpx;
    border-radius: 5rpx;
    background-color: $uni-bg-color-main-red;
    color: $uni-text-color-inverse;
  }

  .money {
    color: $uni-text-color-main-red;
  }

  .name {
    font-weight: bold;
  }

  .subname,
  .address {
    color: $uni-text-color-grey;
  }

  .position {
    color: $uni-text-color-dark;
  }

  .number {
    margin-left: 10rpx;
    color: $uni-text-color-main-orange;
  }

  .review {
    .text {
      padding: 5rpx 8rpx;
      border: 1px solid $uni-text-color-main-orange;
      border-radius: 20rpx 20rpx 20rpx 0;
    }
  }
}
</style>
